<template>
  <div class="has-bottom ">
    <div ref="info">
      <!-- 商品头部 -->
      <productHead :list="Data.imgList" :imgUrl="ThumbnailUrl410" :video-url="VideoUrl" :scroll-top="scrollTop" @changeDetail="changeDetail" @clickLeft="clickLeft" />

      <!-- 商品简介 -->
      <productIntro v-if="flag" :data="Data" @changeFavState="changeFavState" @share="share" :storeId="storeId"/>

      <!-- 商品标签 -->
      <productTag v-show="ProductInfo&&ProductInfo.TagsList&&ProductInfo.TagsList.length>0" :tag-list="ProductInfo.TagsList" />

      <!-- 运费 -->
      <productFreight :data="Data" />

      <!-- 促销、配送 -->
      <div v-show="Data.PolicyList&&Data.PolicyList.length>0" class="product-option mt-10">
        <productOption v-if="Data.PolicyList&&Data.PolicyList.length>0" opt-type="sales" :policy-list="Data.PolicyList" />
      <!-- <productOption opt-type="post" :product="ProductInfo" :address="UserAddress" @changeAddress="changeAddress" /> -->
      </div>

      <!--参数、规格 -->
      <div v-show="(ProductInfo.ProductAttributesList&&ProductInfo.ProductAttributesList.length>0)||ProductInfo.ParamerValue" class="product-option mt-10">
        <productOption v-if="ProductInfo.ProductAttributesList&&ProductInfo.ProductAttributesList.length>0" opt-type="attr" :attr-list="ProductInfo.ProductAttributesList" :product="ProductInfo" @showOpt="showSpec" />
        <productOption v-if="ProductInfo.ParamerValue" opt-type="param" :product="ProductInfo" />
      </div>

      <!-- 评价模块 -->
      <productEvaluate :data="evaluateData" :product-id="ProductID" />
    </div>
    <!-- 详情模块 -->
    <div class="product-detail mt-10">
      <p class="product-detail-tle fw-b">商品详情</p>
      <div v-show="ProductInfo.Description" class="pt-15" v-html="ProductInfo.Description" />
    </div>

    <!-- 底部栏 -->
    <shopCart car-type="productDetail" :car-list="carList" :storeId="storeId" :shop-data="ProductInfo" :ActivityData="ActivityData" :tel="tel" @updateCart="updateCart" @showSpec="showSpec" />

    <!-- 规格弹窗 -->
    <van-popup v-model="popupData.show" position="bottom" class="bottom-popup" @closed="closePopup">
      <!--<ProductSpec :data="popupData.data" :switch85="switch85" :storeId="storeId" :switch203="switch203" :switch7="switch7" :ActivityData="ActivityData" :GradeId="userData.GradeId" :ActivityType="ActivityType" :popup-type="popupData.type" page-type="detail" @closePopup="closePopup" @addCart="addCart" @buyNow="buyNow" />-->
			<specTree :data="popupData.data" :switch85="switch85" :storeId="storeId" :switch203="switch203" :switch7="switch7" :ActivityData="ActivityData" :GradeId="userData.GradeId" :ActivityType="ActivityType" :popup-type="popupData.type" page-type="detail" @closePopup="closePopup" @addCart="addCart" @buyNow="buyNow" />
		</van-popup>
  </div>

</template>

<script>
import { GetBusinessFunction } from 'api/businessSetting'
import productHead from 'components/productDetail/head'
import productIntro from 'components/productDetail/introduction'
import productTag from 'components/productDetail/tag'
import productFreight from 'components/productDetail/freight'
import productOption from 'components/productDetail/option'
import productEvaluate from 'components/productDetail/evaluate'
import shopCart from 'components/shopCart'
//import ProductSpec from 'components/productDetail/spec'
import specTree from 'components/productDetail/specTree'

import { GetInintProductDetailInfo,GetAppProductSimpleInfo,GetCommentListByProduct, GetUserCarList, AddOrUpdateAmount } from 'api/product'
import { GetUserDetail } from 'api/member'

export default {
  components: {
    productHead,
    productIntro,
    productTag,
    productFreight,
    productOption,
    productEvaluate,
    shopCart,
    specTree
  },
  data() {
    return {
      // 头部数据
      scrollTop: 0,
      tel: '',

      Data: {},
      ProductInfo: {},
      ActivityData:{},
      UserAddress: {},

      evaluateData: {},
      carList: [],
      ProductID: 0,

      // sku 商品规格弹窗
      popupData: {
        data: {},
        type: 'sku',
        show: false
      },
      cartRequestList: [],
      commentRequest: {
        page: 1,
        size: 10
      },
      ActivityType:0,
      userData:{},
      switch203:0,
			switch85:0, // 1-成功 0-失败 2-未登陆
			switch7: 0, // 微商下单不限制库存
      storeId:"",
			flag: false,
			VideoUrl: '',
			ThumbnailUrl410: '',
    }
  },
  created() {
    let storeId = sessionStorage.getItem('nav_store_id');
    if(this.$route.query.storeId){
      this.storeId = this.$route.query.storeId
    }else if(storeId){
      this.storeId = storeId
    }else{
      this.storeId = '0'
    }
    this.commentRequest.product_id = this.$route.params.id
    this.ProductID = Number(this.$route.params.id)
    this.GetInintProductDetailInfo()
    this.GetCommentListByProduct()
    this.GetUserCarList()
    this.GetUserDetail()
    this.GetBusinessFunction()

  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    GetBusinessFunction(){
      GetBusinessFunction(203).then(res => {
        if (res) {
          this.switch203 = res.Data[0].Value;
        }
      })
      GetBusinessFunction(85).then(res => {
        if (res) {
          this.switch85 = res.Data[0].Value;
        }
      })
			GetBusinessFunction(7).then(res => {
        if (res) {
          this.switch7 = res.Data[0].Value;
        }
      })
    },
    // 商品、详情切换
    changeDetail(index) {
      console.log(index)
      // 加入锚点
      let height = 0
      switch (index) {
        case 0:
          height = 0
          break
        case 1:
          height = this.$refs.info.offsetHeight - 88
          break
      }
      // 这里需要搞一个滚动过渡动画
      // document.documentElement.scrollTop = height
      this.$utils.animateScrollTop(height)
    },
    clickLeft() {
			this.$utils.back(this.$route.path)
    },

    // 更改收藏状态
    changeFavState(val) {
      this.Data.IsFavorite = val
    },
    showSpec(ActivityType) {
      if(ActivityType != 'attr'){
        this.ActivityType = ActivityType
      }
      this.popupData.data = this.ProductInfo
      this.popupData.show = true
    },
    closePopup() {
      console.log('guanbi')
      this.popupData.show = false
      this.ActivityType = 0
    },
    addCart(arr) {
      console.log(arr)
      this.cartRequestList = arr
      if (this.cartRequestList.length <= 0) {
        this.$toast.fail('请选择商品')
        return
      }
      this.AddOrUpdateAmount()
    },
    buyNow(arr) {
      console.log(arr)
      this.cartRequestList = arr
      // this.AddOrUpdateAmount()
    },
    // 调用分享弹窗
    share() {

    },
    changeAddress(address) {
      this.UserAddress = address
    },
    updateCart(bool) {
      if (bool) {
        this.GetUserCarList()
      }
    },

    // 滚动事件触发下拉加载
    onScroll() {
      this.scrollTop = this.$utils.getScrollTop()
    },

    GetInintProductDetailInfo() {
      GetAppProductSimpleInfo({ productId: this.$route.params.id, InfoType: 1,storeId:this.storeId,isRetail:1 }).then(res => {
        if (res) {
          console.log('购物车：' + res.Data)
          this.Data = res.Data
					this.flag = true
          this.ProductInfo = res.Data.ProductInfo
          this.ActivityData = res.Data.ActivityData
          this.changeArr(this.ProductInfo)
          this.UserAddress = res.Data.UserAddress
					this.ThumbnailUrl410 = res.Data.ProductInfo.ThumbnailUrl410
          if (res.Data.ProductInfo.ImageUrl) {
            this.Data.imgList = res.Data.ProductInfo.ImageUrl.split(',')
            this.ProductInfo.logo = this.Data.imgList[0]
          }
					if (res.Data.ProductInfo.VideoUrl) {
						this.VideoUrl = res.Data.ProductInfo.VideoUrl
					}
          if (res.Data.StoreInfo) {
            this.tel = res.Data.ServiceTel
          }
        }
      })
    },
    
    // 整理数据
    changeArr(item, isNew) {
      const _this = this
      console.log(this)
        // 图片列表
       
        item.BaseUnit = item.DefaultUnit
        // 单位列表
        if (item.Unit && item.Unit.indexOf(',') !== -1) {
          item.UnitList = item.Unit.split(',')
          item.BaseUnit = item.UnitList[0]
        }
        // 换算比例列表
        if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
          item.UnitratioList = item.Unitratio.split(':')
        }
        // 按单限购
        if (item.ProductSkuList && item.ProductSkuList.length === 1) {
          item.oLimitBuy = item.ProductSkuList[0].LimitBuy
        }
        // 购物车数量（同步）
        // if (_this.carList && _this.carList.length > 0) {
        //   const _list = _this.carList
        //   for (let i = 0; i < _list.length; i++) {
        //     if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
        //       if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
        //         for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
        //           if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
        //             for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
        //               if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k].ID) {
        //                 item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i].Amount
        //                 console.log('匹配成功')
        //                 break
        //               }
        //             }
        //           }
        //         }
        //       } else { // 单规格商品
        //         console.log('同步单规格')
        //         item.Amount = _list[i].Amount
        //         break
        //       }
        //     } else {
        //       item.Amount = 0
        //     }
        //   }
        // } else {
        //   item.Amount = 0
        //   if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
        //     for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
        //       if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList.length > 0) {
        //         for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
        //           item.ProductSkuAttrList[j].SkuList[k].Amount = 0
        //         }
        //       }
        //     }
        //   }
        // }
      
    },

    GetCommentListByProduct() {
      GetCommentListByProduct(this.commentRequest).then(res => {
        if (res) {
          console.log(res)
          this.evaluateData = res.Data
        }
      })
    },
    // 获取购物车列表
    GetUserCarList() {
      GetUserCarList({ priceType: 1,IsRetail:1,StoreId:this.storeId}).then(res => {
        if (res) {
          this.carList = res.Data
        }
      })
    },
    // 更新购物车
    AddOrUpdateAmount() {
      AddOrUpdateAmount(this.cartRequestList).then(res => {
        if (res) {
          console.log(res)
          this.popupData.show = false
          this.GetUserCarList()
        }
      })
    },
    //会员详情信息
    GetUserDetail(){
      GetUserDetail().then(res => {
        if (res) {
          this.userData = res.Data
        }
      })
    },
    gotoSupplier(){
      if(this.Data.SupplierInfo.ShopUserStoreId > 0){
        this.$router.push('/businessDetail/' + this.Data.SupplierInfo.ShopUserStoreId)
      }else{
        window.location.href = "/m/supplier/supplierhome?id=" + this.ProductInfo.SupplierId;
      }
    },
  }
}
</script>
<style lang="scss" scoped>

// 详情
.product-detail{
  background: $colorF;
  padding: 16px 0;
  .product-detail-tle{
    padding: 0 32px ;
    font-size: 30px;
    line-height: 1;
    position: relative;
    &::before{
      content:'';
      position: absolute;
      width: 6px;
      border-radius: 3px;
      height: 30px;
      @include bg-primary;
      top: 0px;
      left: 15px;
    }
  }
}
.product-option{
  background: $colorF;
    padding: 25px 32px;
}
.bottom-popup{
  border-radius: 40px 40px 0 0;
}
</style>
